<template>
	<view class="index-box">
		<!-- 爆爆Box -->
		<view class="bar-sticky" :style="{'height':boxHeight+'px;','padding-top':boxTop+'px'}">
			爆爆box
		</view>

		<!-- 主页搜索框 -->
		<IndexSearch />

		<!-- 轮播图 -->
		<IndexBanner />

		<!-- nav -->
		<IndexNav />

		<!-- 公告 -->
		<view class="index-notice-box">
			<!-- 左侧喇叭 -->
			<image :src="imageUrl('index-horn-icon.png')" mode="" class="index-horn-icon" />
			<!-- 公告内容 -->
			<view class="notice-content">
				<view class="transform-text">{{noticeText}}</view>
			</view>
			<!-- 右侧历史公告 -->
			<view class="history-notice" @click="goTo('/pages/historynotice/historynotice')">
				历史公告
			</view>
		</view>

		<!-- 活动图片 -->
		<IndexActivity />

		<!-- 热门推荐 -->
		<LeftBorderTitle :title="'热门推荐'" bgColor="#f8f8f8" />

		<!-- 盲盒列表 -->
		<view class="index-list">
			<view class="index-list-left">
				<!-- 左侧广告占位 -->
				<image :src="imagesUrl('advertising-space.png')" mode=""
					style="width: 336rpx;height: 336rpx;margin-bottom: 18rpx;" />
				<!-- 瀑布流子项 -->
				<view class="list-item">
					<!-- 图片 -->
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="image" />
					<!-- 具体内容 -->
					<view class="content">
						<!-- 标题 -->
						<view class="title">
							<text class="pre">预售</text>
							商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
						</view>
						<!-- 种类 -->
						<view class="kind" :class="{'bg-red':false,'bg-orange':true,'bg-puple':false}">
							竞技一番赏
						</view>
						<!-- 价格 -->
						<view class="money">
							<text style="font-size: 24rpx;">￥</text>
							66
						</view>
					</view>
				</view>
				<view class="list-item" v-for="item in 3">
					<!-- 图片 -->
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="image" />
					<!-- 具体内容 -->
					<view class="content">
						<!-- 标题 -->
						<view class="title">
							<text class="pre">预售</text>
							商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
						</view>
						<!-- 种类 -->
						<view class="kind" :class="{'bg-red':true,'bg-orange':false,'bg-puple':false}">
							锁箱一番赏
						</view>
						<!-- 价格 -->
						<view class="money">
							<text style="font-size: 24rpx;">￥</text>
							66
						</view>
					</view>
				</view>
			</view>
			<view class="index-list-right">
				<!-- 瀑布流子项 -->
				<view class="list-item" v-for="item in 4">
					<!-- 图片 -->
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="image" />
					<!-- 具体内容 -->
					<view class="content">
						<!-- 标题 -->
						<view class="title">
							商品名称商品名称商品名称商品名称
						</view>
						<!-- 种类 -->
						<view class="kind" :class="{'bg-red':false,'bg-orange':false,'bg-puple':true}">
							爆爆赏
						</view>
						<!-- 价格 -->
						<view class="money">
							<text style="font-size: 24rpx;">￥</text>
							66
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 没有更多 -->
		<view class="no-more">
			没有更多了~
		</view>
	</view>
</template>

<script>
	// API
	const {
		getTest
	} = uni.$http.user
	// 搜索框
	import IndexSearch from './components/IndexSearch.vue'

	// 轮播图
	import IndexBanner from './components/IndexBanner.vue'

	// nav
	import IndexNav from './components/IndexNav.vue'

	// 活动
	import IndexActivity from './components/IndexActivity.vue'

	// 左侧边框标题栏组件
	import LeftBorderTitle from '@/components/common/LeftBorderTitle.vue'

	export default {
		created() {},
		data() {
			return {
				// 顶部的高度
				boxTop: 20,
				boxHeight: 44,
				// 公告消息
				noticeText: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
			}
		},
		onShow() {
			// this.$store.dispatch('initUserInfo')
			// getTest({
			// 	boxId: 1
			// })
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url
				})
			}

		},
		mounted() {
			// #ifdef MP-WEIXIN
			const windTop = uni.getSystemInfoSync().windowTop
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.boxTop = menuButtonInfo.top
			this.boxHeight = menuButtonInfo.bottom + (menuButtonInfo.top - windTop) / 2
			// #endif

			// #ifdef APP-PLUS
			this.boxTop = uni.getSystemInfoSync().statusBarHeight
			// #endif
		},
		components: {
			IndexSearch,
			IndexBanner,
			IndexNav,
			IndexActivity,
			LeftBorderTitle
		}
	}
</script>

<style lang="scss" scoped>
	// 首页背景色
	.index-box {

		// 吸顶
		.bar-sticky {
			position: sticky;
			position: -webkit-sticky;
			top: 0;
			left: 0;
			width: 100vw;
			background-image: radial-gradient(farthest-side at 50% 10%, #fffacf, #fff);
			z-index: 99;
			// background: #fff;

			padding-left: 30rpx;
			font-family: YouSheBiaoTiHei;
			font-size: 48rpx;
			line-height: 76rpx;
		}

		// 滚动通知盒子
		.index-notice-box {
			position: relative;
			display: flex;
			justify-content: space-between;
			width: 100vw;
			padding-left: 30rpx;
			height: 76rpx;
			background-color: #fff;
			margin-top: 18rpx;

			// 喇叭
			.index-horn-icon {
				width: 32rpx;
				height: 32rpx;
				margin: auto 0;
			}

			// 公告平移
			@keyframes moveNoticeText {
				from {
					transform: translate(100%);
				}

				to {
					transform: translate(-200%);
				}
			}

			// 公告内容
			.notice-content {
				position: absolute;
				top: 0;
				left: 0;
				width: 520rpx;
				margin-left: 80rpx;
				overflow: hidden;
				white-space: nowrap;
				line-height: 76rpx;

				// 平移的文本
				.transform-text {
					transform: translate(100%);
					animation: moveNoticeText linear 20s infinite;
				}
			}

			// 右侧历史公告
			.history-notice {
				width: 180rpx;
				height: 76rpx;
				font-family: YouSheBiaoTiHei;
				font-size: 24rpx;
				color: #333;
				line-height: 76rpx;
				text-align: center;
				background-image: linear-gradient(110deg, transparent 32rpx, #fff 0);
				background-position: left top;
				background-repeat: no-repeat;
				z-index: 1;
			}
		}
	}

	.index-list {
		display: flex;
		flex-wrap: wrap;
		padding: 18rpx 30rpx;

		.index-list-left {
			margin-right: 18rpx;
		}

		.list-item {
			width: 336rpx;
			background: #fff;
			margin-bottom: 18rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #333;
			overflow: hidden;

			.image {
				width: 336rpx;
				height: 336rpx;
			}

			.content {
				padding: 16rpx 10rpx;

				.title {
					font-size: 28rpx;
					line-height: 32rpx;
					// 超出文本显示隐藏
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

					// 预售
					.pre {
						display: inline-block;
						width: 44rpx;
						// height: 32rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						background: rgba(234, 110, 122, 0.2);
						font-size: 18rpx;
						text-align: center;
						line-height: 32rpx;
						color: #F51F43;

						transform: translateY(-1rpx);
					}
				}

				// 种类
				.kind {
					display: inline-block;
					padding: 0 8rpx;
					height: 32rpx;

					background: #f8f8f8;
					margin-top: 10rpx;
					font-size: 18rpx;
					font-weight: 500;
					text-align: center;
					line-height: 32rpx;
					color: #fff;
					border-raduis: 6rpx;

					// 锁箱一番赏
					&.bg-red {
						background: #FE2424;
					}

					// 竞技一番赏
					&.bg-orange {
						background: #FF7803;
					}

					// 爆爆赏
					&.bg-puple {
						background: #9932FD;
					}
				}

				// 价格
				.money {
					color: #F51F43;
					font-weight: 500;
					font-size: 32rpx;
					margin-top: 18rpx;
				}
			}
		}
	}

	.no-more {
		width: 100vw;
		height: 152rpx;
		background: #F8F9FA;
		color: #999;
		text-align: center;
		line-height: 152rpx;
	}
</style>